<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改设备工艺记录')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
<div class="main-content">
    <form id="form-add" class="form-horizontal" th:object="${eqpProcessRecord}">
        <h4 class="form-header h4">设备工艺基本信息</h4>
        <div class="row">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">设备编号：</label>
                    <div class="col-sm-8">
                        <input name="equipmentId" th:field="*{equipmentId}" class="form-control" type="text" readonly>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">工艺名称：</label>
                    <div class="col-sm-8">
                        <input name="processName" th:field="*{processName}" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">记录日期：</label>
                    <div class="col-sm-8">
                        <div class="input-group date">
                            <input name="maintainDate" class="form-control" placeholder="请输入记录日期" th:field="*{maintainDate}" type="text" required>
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">炉数：</label>
                    <div class="col-sm-8">
                        <input name="heatsNumber" class="form-control" type="text" th:field="*{heatsNumber}" onkeyup="value=value.replace(/[^0-9]/g,'')" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">程序名：</label>
                    <div class="col-sm-8">
                        <input name="programName" class="form-control" type="text" th:field="*{programName}" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">程序名备注：</label>
                    <div class="col-sm-8">
                        <input name="programRemark" class="form-control" type="text" th:field="*{programRemark}" >
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">累计厚度：</label>
                    <div class="col-sm-8">
                        <input name="accuThickness" class="form-control" type="text" th:field="*{accuThickness}" onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">挡片累计使用次数：</label>
                    <div class="col-sm-8">
                        <input name="blankUsedTimes" class="form-control" type="text" th:field="*{blankUsedTimes}" onkeyup="value=value.replace(/[^0-9]/g,'')" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">备注：</label>
                    <div class="col-sm-8">
                        <input name="remark" class="form-control" th:field="*{remark}" type="text" >
                    </div>
                </div>
            </div>
        </div>
        <br />
        <br />
        <h4 class="form-header h4">激活温度950r20（激活后10+/3），未激活电阻规范15+/-5</h4>
        <div class="row">
            <div class="col-sm-12">
                <button type="button" class="btn btn-white btn-sm" onclick="addRow1()"><i class="fa fa-plus"> 增加</i></button>
                <button type="button" class="btn btn-white btn-sm" onclick="sub.delRow()"><i class="fa fa-minus"> 删除</i></button>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table1"></table>
                </div>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">备注：</label>
                    <div class="col-sm-8">
                        <input name="tempResistanceRemark" class="form-control" th:field="*{tempResistanceRemark}" type="text">
                    </div>
                </div>
            </div>
        </div>
        <br />
        <br />
        <br />
        <h4 class="form-header h4">颗粒数</h4>
        <div class="row">
            <div class="col-sm-12">
                <button type="button" class="btn btn-white btn-sm" onclick="addRow2()"><i class="fa fa-plus"> 增加</i></button>
                <button type="button" class="btn btn-white btn-sm" onclick="sub.delRow()"><i class="fa fa-minus"> 删除</i></button>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table2"></table>
                </div>
            </div>
        </div>
        <br />
        <br />
        <div class="row">
            <div class="col-sm-offset-5 col-sm-10">
                <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
            </div>
        </div>

    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
    var prefix = ctx + "equipment/processrecord";
    $(function() {
        // 初始化数据, 可以由后台传过来
        var data1 = [[${eqpProcessRecord.processrecord}]];
        var columns1 = [
            {
                checkbox: true
            },
            {
                field: 'index',
                align: 'center',
                title: "序号",
                width: 40,
                formatter: function (value, row, index) {
                    var columnIndex = $.common.sprintf("<input type='hidden' name='eqplocactiveindex' value='%s'>", $.table.serialNumber(index));
                    var columnId = $.common.sprintf("<input type='hidden' name='processrecord[%s].id' value='%s'>", index, row.id);
                    return columnIndex + $.table.serialNumber(index) + columnId;
                }
            },
            {
                field: 'eqpLotLocation',
                align: 'center',
                title: '位置',
                width: 90,
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLotLocation' value='%s'>", index, value);
                    return html;
                }
            },
            {
                field: 'eqpLot',
                align: 'center',
                title: '卡号',
                width: 250,
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLot' value='%s'>", index, value);
                    return html;
                }
            },
            {
                field: 'eqpLocActiveUp',
                align: 'center',
                title: '（激活）上',
                width: 90,
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocActiveUp' value='%s'>", index, value);
                    return html;
                }
            },
            {
                field: 'eqpLocActiveMiddle',
                align: 'center',
                title: '中',
                width: 90,
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocActiveMiddle' value='%s'>", index, value);
                    return html;
                }
            },
            {
                field: 'eqpLocActiveDown',
                align: 'center',
                title: '下',
                width: 90,
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocActiveDown' value='%s'>", index, value);
                    return html;
                }
            },
            {
                field: 'eqpLocActiveLeft',
                align: 'center',
                title: '左',
                width: 90,
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocActiveLeft' value='%s'>", index, value);
                    return html;
                }
            },
            {
                field: 'eqpLocActiveRight',
                align: 'center',
                title: '右',
                width: 90,
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocActiveRight' value='%s'>", index, value);
                    return html;
                }
            },
            {
                field: 'eqpLocActiveAverage',
                align: 'center',
                title: '平均值',
                width: 90,
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocActiveAverage' value='%s'>", index, value);
                    return html;
                }
            },
            {
                field: 'eqpLocInActiveUp',
                align: 'center',
                title: '（未激活）上',
                width: 90,
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocInActiveUp' value='%s'>", index, value);
                    return html;
                }
            },
            {
                field: 'eqpLocInActiveMiddle',
                align: 'center',
                title: '中',
                width: 90,
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocInActiveMiddle' value='%s'>", index, value);
                    return html;
                }
            },
            {
                field: 'eqpLocInActiveDown',
                align: 'center',
                title: '下',
                width: 90,
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocInActiveDown' value='%s'>", index, value);
                    return html;
                }
            },
            {
                field: 'eqpLocInActiveLeft',
                align: 'center',
                title: '左',
                width: 90,
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocInActiveLeft' value='%s'>", index, value);
                    return html;
                }
            },
            {
                field: 'eqpLocInActiveRight',
                align: 'center',
                title: '右',
                width: 90,
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocInActiveRight' value='%s'>", index, value);
                    return html;
                }
            },
            {
                field: 'eqpLocInActiveAverage',
                align: 'center',
                title: '平均值',
                width: 90,
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocInActiveAverage' value='%s'>", index, value);
                    return html;
                }
            },
            {
                title: '操作',
                align: 'center',
                formatter: function(value, row, index) {
                    var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                    return '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i class="fa fa-remove"></i>删除</a>';
                }
            }
        ];
        var options1 = {
            id: "bootstrap-table1",
            data: data1,
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            columns: columns1
        };
        $.table.init(options1);
    });

    $(function() {
        var data2 = [[${eqpProcessRecord.locparam}]];
        var columns2 = [
            {
                checkbox: true
            },
            {
                field: 'index',
                align: 'center',
                title: "序号",
                formatter: function (value, row, index) {
                    var columnIndex = $.common.sprintf("<input type='hidden' name='locparamindex' value='%s'>", $.table.serialNumber(index));
                    var columnId = $.common.sprintf("<input type='hidden' name='locparam[%s].id' value='%s'>", index, row.id);
                    return columnIndex + $.table.serialNumber(index) + columnId;
                }
            },
            {
                field: 'particleNumLocation',
                align: 'center',
                title: '颗粒数-位置',
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='locparam[%s].particleNumLocation' value='%s'>", index, value);
                    return html;
                }
            },
            {
                field: 'particleNumBefore',
                align: 'center',
                title: '前值',
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='locparam[%s].particleNumBefore' value='%s'>", index, value);
                    return html;
                }
            },
            {
                field: 'particleNumBack',
                align: 'center',
                title: '后值',
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='locparam[%s].particleNumBack' value='%s'>", index, value);
                    return html;
                }
            },
            {
                field: 'particleNumDvalue',
                align: 'center',
                title: '差值',
                formatter: function(value, row, index) {
                    var html = $.common.sprintf("<input class='form-control' type='text' name='locparam[%s].particleNumDvalue' value='%s'>", index, value);
                    return html;
                }
            },
            {
                title: '操作',
                align: 'center',
                formatter: function(value, row, index) {
                    var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                    return '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i class="fa fa-remove"></i>删除</a>';
                }
            }
        ];
        var options2 = {
            id: "bootstrap-table2",
            data: data2,
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            columns: columns2
        };
        $.table.init(options2);
    });

    $("#form-add").validate({
        focusCleanup: true
    });

    /* 主子表-提交 */
    function submitHandler(index, layero){
        if ($.validate.form()) {
            var data = $("#form-add").serializeArray();
            $.operate.saveTab(prefix + "/edit", data);
        }
    }

    function addRow1() {
        var count = $("#bootstrap-table1").bootstrapTable('getData').length;
        var row = {
            index: $.table.serialNumber(count),
            eqpLotLocation: "",
            eqpLot: "",
            eqpLocActiveUp: "",
            eqpLocActiveMiddle: "",
            eqpLocActiveDown: "",
            eqpLocActiveLeft: "",
            eqpLocActiveRight: "",
            eqpLocActiveAverage: "",
            eqpLocInActiveUp: "",
            eqpLocInActiveMiddle: "",
            eqpLocInActiveDown: "",
            eqpLocInActiveLeft: "",
            eqpLocInActiveRight: "",
            eqpLocInActiveAverage: "",
        }
        sub.addRow(row, 'bootstrap-table1');
    }

    function addRow2() {
        var count = $("#bootstrap-table2").bootstrapTable('getData').length;
        var row = {
            index: $.table.serialNumber(count),
            particleNumLocation: "",
            particleNumBefore: "",
            particleNumBack: "",
            particleNumDvalue: ""
        }
        sub.addRow(row, 'bootstrap-table2');
    }

    $("input[name='maintainDate']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("#bootstrap-table").on("post-body.bs.table", function (e, args) {
        $("input[name$='date']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true,
            pickerPosition:'top-right'
        });
    });

</script>
</body>
</html>